<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <title>普通成员查询</title>
  <link rel="stylesheet" href="../../../template/assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="../../../template/assets/css/font-awesome.css">
  <style type="text/css">
    hr{
      margin: 1rem 0;
    }
    /*.accordion-content-style{
      height:30rem;
      overflow-y:auto;
    }*/
    .right-style{
      margin-right:0;
      padding-right:0
    }
    .left-style{
      margin-left:0;
      padding-left:0;
      color:#0e90d2;
    }
  </style>
</head>
<body>
  <div class="am-g am-padding-sm">
    归属集团：<span id="grpName"></span>
  </div>
  <!--选项卡（tabs）begin-->
  <div data-am-widget="tabs" class="am-tabs am-tabs-default am-text-sm" id="general-member" style="margin:0">
    <ul class="am-tabs-nav am-cf">
      <li class="am-active"><a href="#personal-balance">个人余额</a></li>
      <li class=""><a href="#marketing-activity">营销活动</a></li>
      <li class=""><a href="#business-volume">业务量</a></li>
    </ul>
    <div class="am-tabs-bd" style="overflow:hidden;">
      <div class="am-tab-panel am-active" style="padding:0;" id="personal-balance">
        <div class="am-g am-padding-sm" id="loadingbar-per-bal">
          <div class="am-u-sm-12">
            <i class="am-icon-spinner am-icon-spin" aria-hidden="true"></i>  查询中……
          </div>
        </div>

        <!--折叠面板begin-->
        <section data-am-widget="accordion" class="am-accordion am-accordion-basic am-hide" data-am-accordion='{  }' id="personal-balance-section">
          <dl class="am-accordion-item am-active">
            <dt class="am-accordion-title">
              客户基本信息
            </dt>
            <dd class="am-accordion-bd am-collapse am-in">
              <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
              <div class="am-accordion-content accordion-content-style" id="base-info">
                <!-- <div class="am-g">
                  <div class="am-u-sm-5 am-u-md-4 am-u-lg-3 right-style">计费开始时间：</div>
                  <div class="am-u-sm-7 am-u-md-8 am-u-lg-9 left-style">2004-06-24 16:30:23</div>
                </div>
                <hr/> -->
              </div>
              <script type="text/x-handlebars-template" id="base-info-tpl">
                {{#baseInfo item}}{{/baseInfo}}
              </script> 
            </dd>
          </dl>
          <!-- <dl class="am-accordion-item">
            <dt class="am-accordion-title">
              账单信息
            </dt>
            <dd class="am-accordion-bd am-collapse">
              规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器
              <div class="am-accordion-content accordion-content-style">
                
              </div>
            </dd>
          </dl> -->
        </section>
        <!--折叠面板end-->

      </div>
      <div class="am-tab-panel " style="padding:0;" id="marketing-activity">
        <div class="am-g am-padding-sm" id="loadingbar-mar-act">
          <div class="am-u-sm-12">
            <i class="am-icon-spinner am-icon-spin" aria-hidden="true"></i>  正在查询参加过的营销活动……
          </div>
        </div>

        <div data-am-widget="list_news" class="am-list-news am-list-news-default am-hide" id="marketing-activity-list">
          <div class="am-list-news-bd">
            <ul class="am-list" id="marketing-list" style="overflow-y:hidden;">
              <!-- <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
                <div class="am-u-sm-10 am-u-md-11 am-u-lg-11">
                  <div class="am-text-truncate">那时候有多好，任雨打湿裙角。忍不住哼起，心爱的旋律。绿油油的树叶，自由地在说笑。燕子忙归巢，风铃在舞蹈。经过青春的草地，彩虹忽然升起。即使视线渐渐模糊，它也在我心里。就像爱过的旋律，没人能抹去。因为生命存在失望，歌唱，所以才要歌唱。
                  </div>
                  <div>
                    胡玉蓉(2015-01-)
                  </div>
                </div>
                <div class="am-u-sm-2 am-u-md-1 am-u-lg-1 am-text-right">
                  <i class="fa fa-chevron-right am-icon-xs am-margin-top-sm" aria-hidden="true"></i>
                </div>
              </li> -->
            </ul>
            <script type="text/x-handlebars-template" id="marketing-activity-tpl">
              {{#marketingActivity list class=""}}{{/marketingActivity}}
            </script>
          </div>
        </div>

        <div class="am-padding-sm am-hide" id="marketing-detail">
          <!-- <div class="am-g">
            <div class="am-u-sm-5 am-u-md-4 am-u-lg-3">V网剩余分钟数：</div>
            <div class="am-u-sm-7 am-u-md-8 am-u-lg-9">2004-06-24 16:30:23</div>
          </div>
          <hr/>
          <div class="am-g">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-btn am-btn-primary am-btn-sm">
              返回
            </div>
          </div> -->

        </div>
        <script type="text/x-handlebars-template" id="marketing-detail-tpl">
          {{#marketingDetail item}}{{/marketingDetail}}
        </script>

      </div>
      <div class="am-tab-panel" id="business-volume" style="padding:0;">
        <div class="am-g am-padding-sm" id="loadingbar-bus-vol">
          <div class="am-u-sm-12">
            <i class="am-icon-spinner am-icon-spin" aria-hidden="true"></i>  正在查询业务量……
          </div>
        </div>
        
        <div class="am-padding-vertical am-hide" id="business-volume-content"></div>
        <script type="text/x-handlebars-template" id="business-volume-tpl">
          {{#businessVolume item}}{{/businessVolume}}
        </script>

        <!-- <div class="am-g">
          <div class="am-u-sm-5 am-u-md-4 am-u-lg-3">V网剩余分钟数：</div>
          <div class="am-u-sm-7 am-u-md-8 am-u-lg-9">2004-06-24 16:30:23</div>
        </div>
        <hr/> -->

      </div>
    </div>
  </div>
  <!--选项卡（tabs）end-->

  <script type="text/javascript" src="../../../template/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/amazeui.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/handlebars.min.js"></script>
  <script type="text/javascript" src="../../../template/assets/js/amazeui.widgets.helper.min.js"></script>
  <script type="text/javascript" src="../../../template/website/js/app.js"></script>
  <script type="text/javascript" src="../../../template/website/js/goventerprise/esop/general_member.list.js"></script>
</body>
</html>